import 'package:blurb/common/routers/names.dart';
import 'package:blurb/common/store/store_provider.dart';
import 'package:blurb/common/values/images.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';
import 'package:google_fonts/google_fonts.dart';

class RegisterPage extends StatefulWidget {
  const RegisterPage({Key? key}) : super(key: key);

  @override
  State<RegisterPage> createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();
  final _confirmPasswordController = TextEditingController();
  final _nicknameController = TextEditingController();
  final _userStore = StoreProvider().userStore;
  bool _obscurePassword = true;
  bool _obscureConfirmPassword = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage(MIP.background),
            fit: BoxFit.cover,
          ),
        ),
        child: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 返回按钮
              SizedBox(height: 10.h),
              Padding(
                padding: EdgeInsets.only(left: 16.0.w),
                child: IconButton(
                  icon: Icon(Icons.arrow_back_ios_new, color: Colors.white, size: 28.sp),
                  onPressed: () {
                    // 返回到登录页
                    context.go(RNS.login);
                  },
                ),
              ),
              
              // 中间部分
              Expanded(
                child: SingleChildScrollView(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      SizedBox(height: 20.h),
                      // Logo
                      Center(
                        child: Image.asset(
                          MIP.logo2,
                          width: 100.w,
                          height: 100.h,
                        ),
                      ),
                      
                      SizedBox(height: 20.h),
                      
                      // Blurb 标题
                      Center(
                        child: Text(
                          'Blurb',
                          style: GoogleFonts.racingSansOne(
                            color: Colors.white,
                            fontSize: 40.sp,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                      
                      SizedBox(height: 40.h),
                      
                      // 昵称输入框
                      Padding(
                        padding: EdgeInsets.symmetric(horizontal: 30.0.w),
                        child: Container(
                          height: 56.h,
                          decoration: BoxDecoration(
                            color: Colors.transparent,
                            borderRadius: BorderRadius.circular(12.r),
                            border: Border.all(color: const Color(0xFF60C3FF).withOpacity(0.7), width: 2.w),
                          ),
                          child: Padding(
                            padding: EdgeInsets.symmetric(horizontal: 16.0.w, vertical: 2.h),
                            child: TextField(
                              controller: _nicknameController,
                              style: GoogleFonts.inter(color: Colors.white),
                              decoration: InputDecoration(
                                hintText: 'Input Nickname',
                                hintStyle: GoogleFonts.inter(
                                  color: Colors.white70,
                                  fontSize: 12.sp,
                                  fontWeight: FontWeight.w500,
                                ),
                                border: InputBorder.none,
                              ),
                            ),
                          ),
                        ),
                      ),
                      
                      SizedBox(height: 16.h),
                      
                      // 用户名输入框
                      Padding(
                        padding: EdgeInsets.symmetric(horizontal: 30.0.w),
                        child: Container(
                          height: 56.h,
                          decoration: BoxDecoration(
                            color: Colors.transparent,
                            borderRadius: BorderRadius.circular(12.r),
                            border: Border.all(color: const Color(0xFF60C3FF).withOpacity(0.7), width: 2.w),
                          ),
                          child: Padding(
                            padding: EdgeInsets.symmetric(horizontal: 16.0.w, vertical: 2.h),
                            child: TextField(
                              controller: _usernameController,
                              style: GoogleFonts.inter(color: Colors.white),
                              decoration: InputDecoration(
                                hintText: 'Input Username',
                                hintStyle: GoogleFonts.inter(
                                  color: Colors.white70,
                                  fontSize: 12.sp,
                                  fontWeight: FontWeight.w500,
                                ),
                                border: InputBorder.none,
                              ),
                            ),
                          ),
                        ),
                      ),
                      
                      SizedBox(height: 16.h),
                      
                      // 密码输入框
                      Padding(
                        padding: EdgeInsets.symmetric(horizontal: 30.0.w),
                        child: Container(
                          height: 56.h,
                          decoration: BoxDecoration(
                            color: Colors.transparent,
                            borderRadius: BorderRadius.circular(12.r),
                            border: Border.all(color: const Color(0xFF60C3FF).withOpacity(0.7), width: 2.w),
                          ),
                          child: Padding(
                            padding: EdgeInsets.symmetric(horizontal: 16.0.w, vertical: 2.h),
                            child: Row(
                              children: [
                                Expanded(
                                  child: TextField(
                                    controller: _passwordController,
                                    obscureText: _obscurePassword,
                                    style: GoogleFonts.inter(color: Colors.white),
                                    decoration: InputDecoration(
                                      hintText: 'Input Password',
                                      hintStyle: GoogleFonts.inter(
                                        color: Colors.white70,
                                        fontSize: 12.sp,
                                        fontWeight: FontWeight.w500,
                                      ),
                                      border: InputBorder.none,
                                    ),
                                  ),
                                ),
                                IconButton(
                                  icon: Icon(
                                    _obscurePassword ? Icons.visibility_off : Icons.visibility,
                                    color: Colors.white70,
                                  ),
                                  onPressed: () {
                                    setState(() {
                                      _obscurePassword = !_obscurePassword;
                                    });
                                  },
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                      
                      SizedBox(height: 16.h),
                      
                      // 确认密码输入框
                      Padding(
                        padding: EdgeInsets.symmetric(horizontal: 30.0.w),
                        child: Container(
                          height: 56.h,
                          decoration: BoxDecoration(
                            color: Colors.transparent,
                            borderRadius: BorderRadius.circular(12.r),
                            border: Border.all(color: const Color(0xFF60C3FF).withOpacity(0.7), width: 2.w),
                          ),
                          child: Padding(
                            padding: EdgeInsets.symmetric(horizontal: 16.0.w, vertical: 2.h),
                            child: Row(
                              children: [
                                Expanded(
                                  child: TextField(
                                    controller: _confirmPasswordController,
                                    obscureText: _obscureConfirmPassword,
                                    style: GoogleFonts.inter(color: Colors.white),
                                    decoration: InputDecoration(
                                      hintText: 'Confirm Password',
                                      hintStyle: GoogleFonts.inter(
                                        color: Colors.white70,
                                        fontSize: 12.sp,
                                        fontWeight: FontWeight.w500,
                                      ),
                                      border: InputBorder.none,
                                    ),
                                  ),
                                ),
                                IconButton(
                                  icon: Icon(
                                    _obscureConfirmPassword ? Icons.visibility_off : Icons.visibility,
                                    color: Colors.white70,
                                  ),
                                  onPressed: () {
                                    setState(() {
                                      _obscureConfirmPassword = !_obscureConfirmPassword;
                                    });
                                  },
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                      
                      SizedBox(height: 10.h),
                      
                      // 登录提示文本
                      Padding(
                        padding: EdgeInsets.symmetric(horizontal: 30.0.w),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            Text(
                              'Already have an account ? ',
                              style: GoogleFonts.racingSansOne(
                                color: Colors.white70,
                                fontWeight: FontWeight.normal,
                                fontSize: 14.sp,
                              ),
                            ),
                            SizedBox(width: 10.w),
                            GestureDetector(
                              onTap: () {
                                // 跳转到登录页面
                                context.go(RNS.login);
                              },
                              child: Text(
                                'Log in',
                                style: GoogleFonts.racingSansOne(
                                  color: Colors.white,
                                  fontSize: 14.sp,
                                  fontWeight: FontWeight.normal,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      SizedBox(height: 20.h),
                    ],
                  ),
                ),
              ),
              
              // 底部按钮区域
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 30.0.w, vertical: 20.0.h),
                child: Column(
                  children: [
                    // 注册按钮
                    GestureDetector(
                      onTap: _userStore.isLoading ? null : _handleRegister,
                      child: Container(
                        width: double.infinity,
                        height: 56.h,
                        decoration: BoxDecoration(
                          gradient: LinearGradient(
                            begin: Alignment(0.50, 0.00),
                            end: Alignment(0.50, 0.96),
                            colors: [
                              Color(0xFF60C3FF),
                              Color(0xFFAADEFC),
                            ],
                          ),
                          borderRadius: BorderRadius.circular(13.r),
                        ),
                        child: Center(
                          child: Text(
                            'Register',
                            style: GoogleFonts.racingSansOne(
                              color: Colors.white,
                              fontSize: 16.sp,
                              fontWeight: FontWeight.normal,
                            ),
                          ),
                        ),
                      ),
                    ),
                    
                    SizedBox(height: 16.h),
                    
                    // Apple登录按钮
                    Container(
                      width: double.infinity,
                      height: 56.h,
                      decoration: BoxDecoration(
                        color: Colors.black,
                        borderRadius: BorderRadius.circular(12.r),
                        border: Border.all(color: Colors.white.withOpacity(0.4)),
                      ),
                      child: GestureDetector(
                        onTap: () {
                          // Apple登录逻辑
                        },
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Icon(Icons.apple, color: Colors.white, size: 28.sp),
                            SizedBox(width: 8.w),
                            Text(
                              'Continue with Apple',
                              style: GoogleFonts.inter(
                                color: Colors.white,
                                fontSize: 14.sp,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 处理注册
  Future<void> _handleRegister() async {
    String nickname = _nicknameController.text.trim();
    String username = _usernameController.text.trim();
    String password = _passwordController.text.trim();
    String confirmPassword = _confirmPasswordController.text.trim();

    bool success = await _userStore.register(
      username, 
      password, 
      confirmPassword, 
      nickname
    );
    
    if (success) {
      context.go(RNS.login);
    }
  }
}
